<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<jsp:useBean id="calculator" class="beans.calculator" scope="page">
	<jsp:setProperty property = "shoukuan" name="calculator" />
	<jsp:setProperty property = "bili" name="calculator" />
</jsp:useBean>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>steam挂刀计算器</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="CSS.css">
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
	body{
	  background-color:#000000;
	}

	.input{
	  margin: auto;
	}
	
    .footer {
      color: #777;
      padding: 30px 0;
      border-top: 1px solid #E5E5E5;
      margin-top: 70px;
    }

    .jumbotron {
      height: 185spx;
      position: relative;
      padding: 40px 0;
      color: #fff;
      text-align: center;
      text-shadow: 0 1px 3px rgba(0,0,0,.4), 0 0 30px rgba(0,0,0,.075);
      background: #fc00ff; /* fallback for old browsers */
      background: -webkit-linear-gradient(to left, #fc00ff , #00dbde); /* Chrome 10-25, Safari 5.1-6 */
      background: linear-gradient(to left, #fc00ff , #00dbde); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
      -webkit-box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
      box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
    }
    .jumbotron:after {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: url(/Public/img/dbrank-logo-pattern.png) repeat center center;
      opacity: .8;
    }
    
    table h3{
      color:#ffffff;
    }
    body h2{
      color:#ffffff;
      text-align:center;
    }

  
</style>
</head>
<body>

	<div class="jumbotron">
		<h1 style="margin-top:15px">
			
			<p class="lead" style="font-size:lem;font-family:simhei;">
 		<div>steam市场挂刀计算器</div>
		</p>
		</h1>
	</div>
	

		<table align="center" width="400" border="0">
			<tbody>
			    <h2>
					按照提示输入以计算比例
				</h2>
				<HR>
				<form align="center">	
					<tr>
						<td align="left"><h3>进货价格</h3></td>
					</tr>	
					<tr>
						<td align="left"><input type="text" name="jinhuo" maxlength="10" required="true" autocomplete="off" placeholder="进货价格" size="70px" /></td><!--required:必填项-->
					</tr>			
					<tr>
						<td align="left"><h3>Steam市场钱包实际收款</h3></td>					
					</tr>
					<tr>
						<td align="left"><input type="text" name="shoukuan" maxlength="10" required="false" placeholder="Steam市场钱包实际收款" size="70px"  /></td><!--autofocus:自动聚焦（每个页面只允许用一次）-->
					</tr>
					<tr>
						<td align="left"><h3>Steam市场手续费</h3></td>
					</tr>
					<tr>
						<td align="left"><input type="text" name="shouxu" maxlength="10" required="false" placeholder="15%" size="70px"  /></td>
					</tr>
					<tr>
						<td align="left"><h3>Steam市场买家应付价格</h3></td>
					</tr>
					<tr>
						<td align="left"><input type="text" name="yinfu" maxlength="10" required="false" placeholder="Steam市场买家应付价格 " size="70px"  /></td>
					</tr>
					<tr>
						<td align="left"><h3>挂刀比例</h3></td>
					</tr>
					<tr>
						<td align="left"><input type="text" name="bili" maxlength="10" required="false" placeholder="挂刀比例" size="70px"  /></td>
					</tr>
			</form>
			</tbody>
			
			
			
				<tr>
					<td colspan="2" align="center">
						<a href="index.jsp" target="_blank">
							@游戏人生
						</a>
					</td>
				</tr>
		</table>
		
		<div class="input">
			<div class="col-lg-12">
				<div class="alert alert-info text-center">挂刀是指用低价购买的饰品，挂在Steam市场中卖掉，以换取比直接充值更多的Steam钱包余额。挂刀比例越低越划算。<br>

计算公式如下:<br>
Steam市场买家应付价格= Steam市场钱包实际收款*(1+Steam市场手续费)<br>挂刀比例=进货价格/ Steam市场钱包实际收款
				</div>
				<br><br><br>
			</div>
		</div>
	
</body>
</html>